<template>
    <div class="question-list" v-loading="loading">
        <el-button type="success" @click="addQuestion">新建题目</el-button>

        <!-- 表格 -->
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="channelid"
                    label="id">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="题目">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="正确答案">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="错误答案1">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="错误答案2">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="错误答案3">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="答错提示">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="状态">
                </el-table-column>
                <el-table-column
                    prop="address"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div><el-button @click="changeTaskStatus(scope.row)" type="text" size="small">上架</el-button></div>
                        <div><el-button @click="changeTaskStatus(scope.row)" type="text" size="small">下架</el-button></div>
                        <div><el-button @click="editQuestion(scope.row)" type="text" size="small">编辑</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页器 -->
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 编辑窗口 -->
        <el-dialog
            :title="title"
            :visible.sync="showQuestionDetail"
            width="600px">
            <el-form
                ref="form"
                :model="currentItem"
                class="input-no-border-box"
                label-width="80px">
                <el-form-item label="题目">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
                <el-form-item label="正确答案">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
                <el-form-item label="错误答案1">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
                <el-form-item label="错误答案2">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
                <el-form-item label="错误答案3">
                    <el-input v-model="currentItem.name"></el-input>
                </el-form-item>
                <el-form-item label="答错提示">
                    <el-radio-group v-model="currentItem.resource">
                        <el-radio :label="1">上线</el-radio>
                        <el-radio :label="2">暂停</el-radio>
                        <el-radio :label="0">测试</el-radio>
                    </el-radio-group>
                </el-form-item>
                </el-form>
            <span slot="footer">
                <el-button @click="showQuestionDetail = false">取 消</el-button>
                <el-button type="primary" @click="showQuestionDetail = false">{{title === '保存题目' ? '保 存' : '新 建'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            data: [], // 数据列表
            pageNum: 1,
            pageSize: this._pageSize,
            currentItem: {}, // 当前编辑内容
            total: 0,
            title: '',
            showQuestionDetail: false
        }
    },
    created () {
        this.getDataList()
    },

    methods: {
        // 查看列表
        async getDataList () {
            if (this.loading) return
            this.pageNum = 1
            this.loading = true
            let params = {}
            let res = await this.$http.post('/home/findChannels', params)
            if (res.code === '0') {
                this.data = res.data
                this.total = res.data.length
            } else {
                this.$message({
                    showClose: true,
                    message: res.desc,
                    type: 'error'
                })
            }
            this.loading = false
        },

        // 页容切换
        sizeChange (size) {
            this.pageSize = size
            this.pageNum = 1
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
        },

        // 新建题目
        addQuestion () {
            this.title = '新建题目'
            this.currentItem = {}
            this.showQuestionDetail = true
        },

        // 编辑题目
        editQuestion (id) {
            this.title = '编辑题目'
            this.showQuestionDetail = true
        },

        // 切换状态
        changeTaskStatus (item) {
        }
    },

    computed: {
        tableData () {
            let start = this.pageNum * this.pageSize - this.pageSize
            let end = this.pageNum * this.pageSize
            return this.data.slice(start, end)
        }
    }

}
</script>

<style lang="scss" scoped>
    .question-list {
        .table-box {
            margin: 20px 0;
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
